<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <treeTool :tree-node="part" :is-root="true" :isshowdialog="isshowdialog" @Addpartment="Addpartment" />
        <hr>
        <!-- 树状图 -->
        <el-tree
          :data="$store.state.department.depts"
          default-expand-all
          icon-class="el-icon"
          :props="{ label: 'name' }"
        >
          <template slot-scope="obj">
            <treeTool :tree-node="obj.data" style="width: 100%" @Delpartment="Delpartment" @Addpartment="Addpartment" @Editpartment="Editpartment" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <addDept :isshowdialog="isshowdialog" :managers="$store.state.department.managers" :title="title" :partmentdetail="partmentdetail" :tree-node="rootnamedata" @Btnconfirm="Btnconfirm" @btnEsc="btnEsc" />
  </div>
</template>

<script>
import treeTool from './components/tree-tool.vue'
import addDept from './components/add-dept.vue'
import { get_departmentdetails, edit_company_department, add_company_department } from '@/api/department'

export default {
  components: {
    treeTool, addDept
  },
  data() {
    return {
      title: '新增部门',
      partmentdetail: {},
      rootnamedata: {},
      isshowdialog: false,
      part: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      }
    }
  },
  async created() {
    await this.$store.dispatch('department/get_company_department')
    await this.$store.dispatch('department/get_user_simple')
  },
  methods: {
    async Delpartment(id) {
      await this.$store.dispatch('department/del_company_department', id)
      await this.$message.success('删除成功!')
    },
    Addpartment(id) {
      this.rootnamedata = { id }
      this.partmentdetail.pid = id
      if (!id) {
        this.partmentdetail.pid = ''
      }
      this.title = '新增部门'
      this.isshowdialog = true
    },
    async Editpartment(id) {
      this.rootnamedata = { id }
      this.partmentdetail = await get_departmentdetails(id)
      this.isshowdialog = true
      this.title = '编辑部门'
    },
    async Btnconfirm(partmentdetail) {
      const nowtime = new Date().toLocaleString()
      partmentdetail.createTime = nowtime
      if (partmentdetail.id) {
        await edit_company_department(partmentdetail.id, partmentdetail)
        this.$message.success('保存成功')
      } else {
        await add_company_department(partmentdetail)
        this.$message.success('新增成功')
      }
      await this.$store.dispatch('department/get_company_department')
      this.partmentdetail = {}
      this.isshowdialog = false
    },
    btnEsc() {
      this.partmentdetail = {}
      this.isshowdialog = false
    }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
